<template>
	<view class="container">
		<uni-forms :value="formData" ref="form" :rules="rules">
			<uni-forms-item label="日期" name="subDate">
				<uni-datetime-picker type="datetime" :value="formData.subDate" return-type="timestamp" @change="dateChange"></uni-datetime-picker>
			</uni-forms-item>
			<uni-forms-item label="资金流向" name="moneyType">
				<uni-data-checkbox v-model="formData.moneyType" :localdata="moneyType" @change="onchangeMoneyType" />
			</uni-forms-item>
			<uni-forms-item label="交易渠道" name="payChannel">
				<uni-data-picker :localdata="payChannel" v-model="formData.payChannel" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="支出类型" name="outType" v-show="formData.moneyType == 'out'">
				<uni-data-picker :localdata="outType" popup-title="支出类型" v-model="formData.outType" @change="changeOutType" @nodeclick="clickOutType"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="收入类型" name="inType" v-show="formData.moneyType == 'in'">
				<uni-data-picker :localdata="inType" popup-title="收入类型" v-model="formData.inType" @change="changeInType" @nodeclick="clickInType"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="费用(元)" name="cost" >
				<uni-easyinput type="digit" v-model="formData.cost" placeholder="请输入数字" name="cost" ></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="说明" name="remarks">
				<uni-easyinput type="text" v-model="formData.remarks" name="remarks"></uni-easyinput>
			</uni-forms-item>
			<button type="primary" @click="submitForm">提交</button>
		</uni-forms>
	</view>
</template>

<script>
import { wxSaveAccount } from '@/api/public.js';
export default {
	data() {
		return {
			formData: {
				moneyType: 'out',
				payChannel: '微信',
				payType: '其他',
				inType:'其他',
				outType:'其他',
				cost: 1.01,
				remarks: '',
				subDate: Date.now()
			},
			rules: {
				// 对name字段进行必填验证
				cost: {
					rules: [{
							required: true,
							errorMessage: '请输入费用金额',
						}
					]
				},
				remarks: {
					rules: [
						{
							maxLength: 100,
							errorMessage: '最多输入 {maxLength} 个字符',
						}
					]
				}
			},
			moneyType: [
				{
					text: '收入',
					value: 'in'
				},
				{
					text: '支出',
					value: 'out'
				}
			],
			outType: [
				{
					text: '生活服务',
					value: '生活服务'
				},
				{
					text: '充值缴费',
					value: '充值缴费'
				},
				{
					text: '文化休闲',
					value: '文化休闲'
				},
				{
					text: '日用百货',
					value: '日用百货'
				},
				{
					text: '交通出行',
					value: '交通出行'
				},
				{
					text: '餐饮美食',
					value: '餐饮美食'
				},
				{
					text: '服饰装扮',
					value: '服饰装扮'
				},
				{
					text: '旅行社交',
					value: '旅行社交'
				},
				{
					text: '美容管理',
					value: '美容管理'
				},
				{
					text: '宠物支出',
					value: '宠物支出'
				},
				{
					text: '其他',
					value: '其他'
				}
			],
			inType: [
				{
					text: '薪资',
					value: '薪资'
				},
				{
					text: '经营收入',
					value: '经营收入'
				},
				{
					text: '租金',
					value: '租金'
				},
				{
					text: '利息',
					value: '利息'
				},
				{
					text: '亲友赠送',
					value: '亲友赠送'
				},
				{
					text: '退休金',
					value: '退休金'
				},
				{
					text: '养老金',
					value: '养老金'
				},
				{
					text: '救济金',
					value: '救济金'
				},
				{
					text: '抚恤金',
					value: '抚恤金'
				},
				{
					text: '其他',
					value: '其他'
				}
			],
			payChannel: [
				{
					text: '微信',
					value: '微信'
				},
				{
					text: '支付宝',
					value: '支付宝'
				},
				{
					text: '云闪付',
					value: '云闪付'
				},
				{
					text: '美团',
					value: '美团'
				},
				{
					text: '京东',
					value: '京东'
				},
				{
					text: '度小满',
					value: '度小满'
				},
				{
					text: '唯品会',
					value: '唯品会'
				},
				{
					text: '现金交易',
					value: '现金交易'
				},
				{
					text: '银联支付',
					value: '银联支付'
				},
				{
					text: '信用卡',
					value: '信用卡'
				},
				{
					text: '储蓄卡',
					value: '储蓄卡'
				},
				{
					text: '其他',
					value: '其他'
				}
			]
		};
	},
	onLoad(options) {
		// 初始化页面
	},
	methods: {
		onchangeMoneyType: function(e) {
			const items = e.detail.value;
			if(items == "in")
			this.formData.payType = this.formData.inType;
			else
			this.formData.payType = this.formData.outType;
			console.log(this.formData.payType);
		},
		changeOutType: function(e) {
			const items = e.detail.value;
			this.formData.outType = items[0].value;
			this.formData.payType = items[0].value;
			console.log(items[0].value);
		},
		clickOutType: function(e) {
			console.log(e);
		},
		changeInType: function(e) {
			const items = e.detail.value;
			this.formData.inType = items[0].value;
			this.formData.payType = items[0].value;
			console.log(items[0].value);
		},
		clickInType: function(e) {
			console.log(e);
		},
		onchange: function(e) {
			const items = e.detail.value;
			this.formData.name = items[0].value;
			console.log(items[0].value);
		},
		onnodeclick: function(e) {
			console.log(e);
		},
		dateChange: function(e) {
			console.log(e);
			this.formData.subDate = e;
		},
		submitForm: function() {
			let dDate = this.formData;
			this.$refs.form
				.submit()
				.then(data => {
					wxSaveAccount(dDate)
						.then(res => {
							uni.showToast({
								icon: 'none',
								title: res.data.result,
								duration: 3000
							});
						})
						.catch(err => {
							uni.showToast({
								icon: 'none',
								title: err,
								duration: 3000
							});
						});
				})
				.catch(err => {
					uni.showToast({
						icon: 'none',
						title: err,
						duration: 3000
					});
				});
		}
	}
};
</script>

<style></style>
